<template>
<teleport to="#modal">
  <div class="modal d-block" tabindex="-1" v-if="visible">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{title}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" @click="onClose">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- 这里定义一个插件，用来插入一段提示性文字询问或提示用户 -->
          <slot></slot>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="onClose">取消</button>
          <button type="button" class="btn btn-primary" @click="onConfirm">确定</button>
        </div>
      </div>
    </div>
  </div>
</teleport>
</template>

<script>
import { defineComponent } from 'vue'
import useDOMCreate from '../hooks/useDOMCreate'
export default defineComponent({
    name:'modal',
    props:{
        title:Boolean,  //控制删除框的左上角标题
        visible:{     //控制删除框是否显示
            type:Boolean,
            default:false
        }
    },
    emits:['modal-on-close','modal-on-confirm'],
    setup(props,context){
        useDOMCreate('modal') //创建一个id为modal的div元素，将删除提示框放进这个div里面
        const onClose = ()=>{ //点击右上方的[X]或者点击取消按钮，执行此函数，向PostDetail.vue发送事件处理
            context.emit('modal-on-close')
        }
        const onConfirm = () =>{ //点击右下方的确定按钮，执行此函数，向PostDetail.vue发送事件处理
            context.emit('modal-on-confirm')
        }
        return {
            onClose,
            onConfirm
        }
    }
})
</script>
